<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>《缙青年》电子期刊 - 移动阅读器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #000;
            overflow: hidden;
            touch-action: manipulation;
        }
        
        .mobile-reader {
            width: 100vw;
            height: 100vh;
            position: relative;
            display: flex;
            flex-direction: column;
        }
        
        .mobile-header {
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            transition: opacity 0.3s ease;
        }
        
        .mobile-header.hidden {
            opacity: 0;
            pointer-events: none;
        }
        
        .back-btn {
            background: none;
            border: none;
            color: white;
            font-size: 18px;
            padding: 5px 10px;
            cursor: pointer;
        }
        
        .book-title {
            font-size: 16px;
            font-weight: 500;
        }
        
        .page-info {
            font-size: 14px;
            opacity: 0.8;
        }
        
        .mobile-viewer {
            flex: 1;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f5f5f5;
        }
        
        .mobile-canvas {
            max-width: 100%;
            max-height: 100%;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        }
        
        .mobile-controls {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.8);
            padding: 15px;
            display: flex;
            justify-content: center;
            gap: 20px;
            transition: opacity 0.3s ease;
        }
        
        .mobile-controls.hidden {
            opacity: 0;
            pointer-events: none;
        }
        
        .mobile-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            padding: 12px 20px;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.2s ease;
        }
        
        .mobile-btn:active {
            background: rgba(255, 255, 255, 0.4);
        }
        
        .mobile-btn:disabled {
            opacity: 0.5;
            pointer-events: none;
        }
        
        .touch-zones {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
        }
        
        .touch-zone {
            flex: 1;
            height: 100%;
            position: relative;
        }
        
        .touch-zone.left {
            background: rgba(255, 0, 0, 0.1);
        }
        
        .touch-zone.center {
            background: rgba(0, 255, 0, 0.1);
        }
        
        .touch-zone.right {
            background: rgba(0, 0, 255, 0.1);
        }
        
        .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #666;
            font-size: 18px;
        }
        
        .error {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #e74c3c;
            text-align: center;
            padding: 20px;
        }
        
        /* 隐藏调试区域 */
        .debug-zones {
            opacity: 0;
        }
        
        /* 页面切换动画 */
        .mobile-canvas.transitioning {
            transition: transform 0.2s ease;
        }
        
        .mobile-canvas.slide-left {
            transform: translateX(-10px);
        }
        
        .mobile-canvas.slide-right {
            transform: translateX(10px);
        }
    </style>
</head>
<body>
    <div class="mobile-reader">
        <!-- 顶部标题栏 -->
        <div class="mobile-header" id="mobileHeader">
            <button class="back-btn" onclick="goHome()">← 返回</button>
            <div class="book-title">《缙青年》第三期</div>
            <div class="page-info" id="pageInfo">1/1</div>
        </div>
        
        <!-- PDF显示区域 -->
        <div class="mobile-viewer">
            <div class="loading" id="loadingText">正在加载...</div>
            <canvas class="mobile-canvas" id="mobileCanvas" style="display: none;"></canvas>
            <div class="error" id="errorText" style="display: none;">
                <div>加载失败</div>
                <button class="mobile-btn" onclick="location.reload()">重试</button>
            </div>
        </div>
        
        <!-- 底部控制栏 -->
        <div class="mobile-controls hidden" id="mobileControls">
            <button class="mobile-btn" id="prevBtn" onclick="prevPage()">上一页</button>
            <button class="mobile-btn" id="nextBtn" onclick="nextPage()">下一页</button>
        </div>
        
        <!-- 触控区域 -->
        <div class="touch-zones debug-zones">
            <div class="touch-zone left" onclick="prevPage()"></div>
            <div class="touch-zone center" onclick="toggleControls()"></div>
            <div class="touch-zone right" onclick="nextPage()"></div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
    <script>
        // 配置PDF.js
        if (typeof pdfjsLib !== 'undefined') {
            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
        }

        let pdfDoc = null;
        let currentPage = 1;
        let totalPages = 0;
        let isLoading = false;
        let controlsVisible = false;
        
        const canvas = document.getElementById('mobileCanvas');
        const ctx = canvas.getContext('2d');
        
        // 手势识别
        let gestureStart = { x: 0, y: 0, time: 0 };
        let isGesturing = false;
        
        function updateStatus(message, isError = false) {
            const loading = document.getElementById('loadingText');
            const error = document.getElementById('errorText');
            
            if (isError) {
                loading.style.display = 'none';
                error.style.display = 'block';
                error.querySelector('div').textContent = message;
            } else {
                loading.textContent = message;
                loading.style.display = 'block';
                error.style.display = 'none';
            }
        }
        
        function updatePageInfo() {
            document.getElementById('pageInfo').textContent = `${currentPage}/${totalPages}`;
            
            const prevBtn = document.getElementById('prevBtn');
            const nextBtn = document.getElementById('nextBtn');
            
            prevBtn.disabled = currentPage <= 1;
            nextBtn.disabled = currentPage >= totalPages;
        }
        
        function toggleControls() {
            const header = document.getElementById('mobileHeader');
            const controls = document.getElementById('mobileControls');
            
            controlsVisible = !controlsVisible;
            
            if (controlsVisible) {
                header.classList.remove('hidden');
                controls.classList.remove('hidden');
            } else {
                header.classList.add('hidden');
                controls.classList.add('hidden');
            }
        }
        
        async function loadPDF() {
            try {
                updateStatus('正在加载PDF...');
                
                const pdfPath = 'pdfs/《缙青年》第三期.pdf';
                const loadingTask = pdfjsLib.getDocument(pdfPath);
                
                pdfDoc = await loadingTask.promise;
                totalPages = pdfDoc.numPages;
                
                updateStatus('加载完成');
                await renderPage(1);
                
                document.getElementById('loadingText').style.display = 'none';
                
            } catch (error) {
                console.error('PDF加载失败:', error);
                updateStatus('加载失败，请重试', true);
            }
        }
        
        async function renderPage(pageNum) {
            if (!pdfDoc || isLoading) return;
            
            try {
                isLoading = true;
                currentPage = pageNum;
                
                const page = await pdfDoc.getPage(pageNum);
                const viewport = page.getViewport({ scale: 1.0 });
                
                // 计算适合屏幕的缩放比例
                const containerWidth = window.innerWidth;
                const containerHeight = window.innerHeight - 100; // 减去控制栏高度
                
                const scaleX = containerWidth / viewport.width;
                const scaleY = containerHeight / viewport.height;
                const scale = Math.min(scaleX, scaleY) * 0.9; // 留一些边距
                
                const scaledViewport = page.getViewport({ scale });
                
                canvas.width = scaledViewport.width;
                canvas.height = scaledViewport.height;
                
                const renderContext = {
                    canvasContext: ctx,
                    viewport: scaledViewport
                };
                
                await page.render(renderContext).promise;
                
                canvas.style.display = 'block';
                updatePageInfo();
                
            } catch (error) {
                console.error('页面渲染失败:', error);
                updateStatus('渲染失败', true);
            } finally {
                isLoading = false;
            }
        }
        
        async function prevPage() {
            if (currentPage > 1) {
                canvas.classList.add('transitioning', 'slide-right');
                setTimeout(async () => {
                    await renderPage(currentPage - 1);
                    canvas.classList.remove('transitioning', 'slide-right');
                }, 100);
            }
        }
        
        async function nextPage() {
            if (currentPage < totalPages) {
                canvas.classList.add('transitioning', 'slide-left');
                setTimeout(async () => {
                    await renderPage(currentPage + 1);
                    canvas.classList.remove('transitioning', 'slide-left');
                }, 100);
            }
        }
        
        function goHome() {
            window.location.href = 'index.html';
        }
        
        // 触摸手势处理
        document.addEventListener('touchstart', (e) => {
            const touch = e.touches[0];
            gestureStart = {
                x: touch.clientX,
                y: touch.clientY,
                time: Date.now()
            };
            isGesturing = true;
        });
        
        document.addEventListener('touchend', (e) => {
            if (!isGesturing) return;
            
            const touch = e.changedTouches[0];
            const deltaX = touch.clientX - gestureStart.x;
            const deltaY = touch.clientY - gestureStart.y;
            const deltaTime = Date.now() - gestureStart.time;
            
            isGesturing = false;
            
            // 判断是否为滑动手势
            if (Math.abs(deltaX) > 50 && deltaTime < 500) {
                e.preventDefault();
                if (deltaX > 0) {
                    prevPage(); // 向右滑动 - 上一页
                } else {
                    nextPage(); // 向左滑动 - 下一页
                }
            }
        });
        
        // 防止页面滚动
        document.addEventListener('touchmove', (e) => {
            e.preventDefault();
        }, { passive: false });
        
        // 页面加载完成后自动加载PDF
        window.addEventListener('load', () => {
            // 检查URL参数
            const urlParams = new URLSearchParams(window.location.search);
            const bookId = urlParams.get('book');
            
            if (bookId) {
                loadPDF();
            } else {
                updateStatus('缺少书籍参数', true);
            }
        });
        
        // 隐藏地址栏（移动端）
        setTimeout(() => {
            window.scrollTo(0, 1);
        }, 100);
    </script>
</body>
</html>
